import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input, Space, Tag, Typography, Select } from "antd";
// http
import http from '../../../utils/request';

const { Text, Link } = Typography;
const { Option } = Select;



class CloudAlarmEvent extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "region", key: "region",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "业务线", dataIndex: "business", key: "business",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="blue">{rowData.business}</Tag>
                            </div>
                        )
                    }
                },
                {title: "应用类型", dataIndex: "product", key: "product"},
                {title: "维护状态", dataIndex: "maintain", key: "maintain",
                    render: (text, rowData) => {
                        const maintain = rowData.maintain ? <Tag>维护</Tag> : <Tag color="yellow">告警</Tag>
                        return(
                            <div>
                                {maintain}
                            </div>
                        )
                    }
                },
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id", width: '180px',
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <Link href="">
                                    {rowData.instance_id}
                                </Link>
                                <Text >{rowData.instance_name}
                                </Text>
                            </Space>
                        )
                    }
                },
                {title: "名称/描述", dataIndex: "event_action", key: "event_action", width: "330px",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <Link href="">
                                    {rowData.event_action}
                                </Link>
                                <Text >{rowData.event_desc}
                                </Text>
                            </Space>
                        )
                    }
                },
                {title: "事件时间", dataIndex: "event_time", key: "event_time"},

                {title: "类型", dataIndex: "event_type", key: "event_type"},
                {title: "状态", dataIndex: "event_status", key: "event_status"},
                {title: "分组", dataIndex: "rule_name", key: "rule_name"},
                {title: "级别", dataIndex: "event_level", key: "event_level"},
            ],
            loading: false,
            search_instance_id: null,
            search_instance_name: null,
            search_business_name: null,
            search_namespace: null,
            search_option_business: null,
            search_maintain: null,
        }
    }

    componentDidMount() {
        this.loadData()
        this.loadDataBusiness()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'instance_id__contains': this.state.search_instance_id,
            'instance_name__contains': this.state.search_instance_name,
            'business': this.state.search_business_name,
            'product': this.state.search_product,
            'maintain': this.state.search_maintain,
        }

        // 获取分组列表
        http.get('/alarm/event', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    loadDataBusiness = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/business', {params: requestData}).then(response=>{
            const search_option_business = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_business.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_business: search_option_business
            })
        })
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }    

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_instance_id: data.instance_id ? data.instance_id : null,
            search_instance_name: data.instance_name ? data.instance_name: null,
            search_maintain: data.maintain ? data.maintain : null,
        })
        this.loadData()
    }


    // 搜索切换业务线
    onChangeBusiness = (value) => {
        if (value) {
            this.setState({
                search_business_name: value
            })
        } else {
            this.setState({
                search_business_name: null,
            })
        }
    }

    // 搜索切换应用类型
    onChangeNameSpace = (value) => {
        if (value) {
            this.setState({
                search_product: value
            })
        } else {
            this.setState({
                search_product: null,
            })
        }
    }

    render(){
        const { loading, dataSource, columns, page, total, search_option_business } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="实例ID" name="instance_id">
                        <Input placeholder="请输入告警实例ID"  />
                    </Form.Item>
                    <Form.Item label="实例名称" name="instance_name">
                        <Input placeholder="请输入告警实例名称"  />
                    </Form.Item>
                    <Form.Item label="业务线" name="business_name">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择业务线"
                            optionFilterProp="children"
                            onChange={this.onChangeBusiness}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_business}
                        </Select>
                    </Form.Item>
                    <Form.Item label="告警类型" name="product">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择告警资源类型"
                            onChange={this.onChangeNameSpace}
                            >
                            <Option key="ADB">ADB</Option>
                            <Option key="ADS">ADS</Option>
                            <Option key="AIS">AIS</Option>
                            <Option key="BMS">BMS</Option>
                            <Option key="CEN">CEN</Option>
                            <Option key="CloudMonitor">CloudMonitor</Option>
                            <Option key="Config">Config</Option>
                            <Option key="DBS">DBS</Option>
                            <Option key="DTS">DTS</Option>
                            <Option key="E-MapReduce">E-MapReduce</Option>
                            <Option key="ECS">ECS</Option>
                            <Option key="ENS">ENS</Option>
                            <Option key="ESS">ESS</Option>
                            <Option key="ExpressConnect">ExpressConnect</Option>
                            <Option key="GPDB">GPDB</Option>
                            <Option key="HBR">HBR</Option>
                            <Option key="IoT">IoT</Option>
                            <Option key="MongoDB">MongoDB</Option>
                            <Option key="NewBGPDDoS">NewBGPDDoS</Option>
                            <Option key="OSS">OSS</Option>
                            <Option key="Polardb">Polardb</Option>
                            <Option key="RDS">RDS</Option>
                            <Option key="Redis">Redis</Option>
                            <Option key="SCDN">SCDN</Option>
                            <Option key="SLB">SLB</Option>
                            <Option key="SMC">SMC</Option>
                            <Option key="SmartAccessGateway">SmartAccessGateway</Option>
                            <Option key="VPN">VPN</Option>
                            <Option key="WAF">WAF</Option>
                            <Option key="actiontrail">actiontrail</Option>
                            <Option key="cfw">cfw</Option>
                            <Option key="computenest">computenest</Option>
                            <Option key="ddh">ddh</Option>
                            <Option key="ddosDip">ddosDip</Option>
                            <Option key="ddosbgp">ddosbgp</Option>
                            <Option key="dlf">dlf</Option>
                            <Option key="event_privatelink">event_privatelink</Option>
                            <Option key="kms">kms</Option>
                            <Option key="oceanbase">oceanbase</Option>
                            <Option key="oos">oos</Option>
                            <Option key="pubdns">pubdns</Option>
                            <Option key="pvtzpost">pvtzpost</Option>
                            <Option key="ros">ros</Option>
                            <Option key="tag">tag</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="维护状态" name="maintain">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询维护告警状态"
                            >
                            <Option key={true}>维护</Option>
                            <Option key={false}>告警</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}><Button type="primary" onClick={this.onAddCloudPlatformBtn}></Button></div>
                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}

export default CloudAlarmEvent;